<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  export default {
    name: 'editorElem',
    data() {
      return {
        editorContent: ''
      }
    },
    props: ['catchData'],
    mounted() {
      var editor = new E(this.$refs.editorElem)
      editor.customConfig.onchange = (html) => {
        this.editorContent = html
        this.catchData(html)
      }
      editor.customConfig.uploadImgServer = '你的上传图片的接口'
      editor.customConfig.uploadFileName = '你自定义的文件名'
      editor.customConfig.uploadImgHeaders = {
        'Accept': '*/*',
        'Authorization': 'Bearer '
      }
      editor.customConfig.menus = [
        'head',
        'list',
        'justify',
        'bold',
        'fontSize',
        'italic',
        'underline',
        'image',
        'foreColor',
        'undo',
        'redo'
      ]
      editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
        },
        success: function (xhr, editor, result) {
          this.imgUrl = Object.values(result.data).toString()
        },
        fail: function (xhr, editor, result) {
        },
        error: function (xhr, editor) {
        },
        timeout: function (xhr, editor) {
        },
        customInsert: function (insertImg, result, editor) {
          let url = Object.values(result.data)
          JSON.stringify(url)
          insertImg(url)
        }
      }
      editor.create()
    }
  }
  </script>
